
<template>
    <div>
      <div id="myChart"
           ref="myChart"
           :style="{width: '100%', height: '180px'}"></div>
    </div>
  </template>
  <script>
  import echarts from "echarts";
  export default {
    props: {
      formData: {},
      type: {},
      time: {
        type: String
      }
    },
    data () {
      return {};
    },
    watch: {
      formData: {
        handler (newVal, oldVal) {
          this.drawLine();
        },
        deep: true
      }
    },
    mounted () {
      this.drawLine();
    },
    methods: {
      drawLine () {
        let text = "";
        let text1 = "";
        // 初始化echarts实例
        let myChart = this.$echarts.init(this.$refs.myChart);
        let xData = this.formData.map(item => {
          return item.stTime;
        });
        let yData1 = [];
        let yData2 = [];
        yData2 = this.formData.map(item => {
          return { value: item.robotJieDaiCount, timekey: item.timekey };
        });
        let series = [];
        text = "机器人接待";
        text1 = "人工接待";
        yData1 = this.formData.map(item => {
          return { value: item.agentJieDaiCount, timekey: item.timekey };
        });
        series = [
          {
            type: "bar",
            name: text,
            // stack: "总量",
            smooth: 0.3,
            areaStyle: {
              normal: {
                color: "rgba(67, 156, 245, 1)" //改变区域颜色
              }
            },
            itemStyle: {
              normal: {
                color: "rgba(67, 156, 245, 1)", //改变折线点的颜色
                lineStyle: {
                  color: "rgba(67, 156, 245, 1)" //改变折线颜色
                }
              }
            },
              stack: 'x',
            data: yData2
          },
          {
            type: "bar",
            name: text1,
            // stack: "总量",
            smooth: 0.3,
            areaStyle: {
              normal: {
                color: "rgba(92, 219, 211, 1)" //改变区域颜色
              }
            },
            itemStyle: {
              normal: {
                color: "rgba(92, 219, 211, 1)", //改变折线点的颜色
                lineStyle: {
                  color: "rgba(92, 219, 211, 1)" //改变折线颜色
                }
              }
            },
            stack: 'x',
            data: yData1
          },
        ]; // 绘制图表
        myChart.setOption({
          title: {},
          tooltip: {
            showContent: true,
            trigger: "axis",
            formatter: params => {
              let str = "";
              if (this.type == 2) {
                str =
                  params[0].data.timekey + "<br/>" + text + ":" + params[0].value;
              } else if (this.type == 1) {
                str =
                  params[0].data.timekey + "<br/>" + text + ":" + params[0].value;
                // +
                // "<br/>" +
                // "转人工率" +
                // this.formData[params[0].dataIndex].lv +
                // "%";
              } else {
                let total =
                  (Number(params[0].value) ? Number(params[0].value) : 0) +
                  (Number(params[1].value) ? Number(params[1].value) : 0);
                let per = (
                  (Number(params[1].value) ? Number(params[1].value) : 0) /
                  total *
                  100
                ).toFixed(2);
                str =
                  params[0].name +
                  "<br/>" +
                  text1 +
                  ":" +
                  params[1].value +
                  "<br/>" +
                  text +
                  ":" +
                  params[0].value;
              }
              this.$emit("chooseDate", params[0].data.timekey);
              return str;
            }
            // axisPointer: {
            //   type: "cross",
            //   label: {
            //     backgroundColor: "#6a7985"
            //   }
            // }
          },
          legend: {
            top: '1%',
      data: [text,text1],
      show: true,
    },
          grid: {
            left: "3%",
            top: "13%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            boundaryGap: true,
            data: xData,
          },
          yAxis: {
            type: "value",
            splitLine: { show: false },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(115, 116, 141, 1)"
              }
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
                color: ["rgba(73, 74, 92, 1)"]
              },
              show: false //隐藏或显示
            }
          },

          series: series
        });
      }
    }
  };
  </script>

  <style scoped lang='less'>
  .zhineng {
    background: #07cc94;
    width: 0.1rem;
    height: 0.1rem;
  }
  .zhuanren {
    background: #0095fd;
    width: 0.1rem;
    height: 0.1rem;
  }
  p {
    font-size: 0.2rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3d3d3d;
    margin-left: 0.1rem;
    /* float: left; */
  }
  </style>
